<template>
  <div>
    <div
      shadow="naver"
      v-for="(item, index) in userSelectors"
      :key="index"
      style="margin-top: 10px"
      class="user-card"
    >
      <el-form
        label-width="0px"
        class="demo-form"
        label-position="right"
        size="mini"
      >
        <el-form-item label="" prop="ame">
          <el-select
            size="mini"
            style="width: 100%"
            v-model="item.selectorId"
            @change="selectorChange(item)"
            placeholder="选择人员类型"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in allUserSelectors"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="ame">
          <userSelections
            :index="index"
            :selectorId="item.selectorId"
            :selections="item.selections"
            ref="userSelections"
            @ok-click="userSelectionsOkHandler"
          ></userSelections>
        </el-form-item>
        <el-form-item label="" prop="ame">
          <el-select
            placeholder="审批人"
            size="mini"
            style="width: 100%"
            :value="userIds"
            @change="handleUserChange"
            multiple
          >
            <el-option
              v-for="item in allUsers"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="ame"> </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import userSelections from "./userSelections";
export default {
  components: { userSelections },
  props: {
    userSelectors: {
      type: Array,
      default: function () {
        return [];
      },
    },
    users: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    userIds() {
      return (this.users || []).map((u) => u.id);
    },
  },
  filters: {
    getSelectionsName(selections) {
      if (!selections) return "";
      var names = [];
      selections.forEach((s) => {
        names.push(s.name);
      });
      return names.join(",");
    },
  },
  data() {
    return {
      allUsers: [],
      allUserSelectors: [],
    };
  },
  mounted() {
    this.loadUserSelectors();
  },
  methods: {
    loadUserSelectors() {
      this.$store.dispatch("workflow/getAllUserSelectors").then((res) => {
        console.log(res);
        this.allUserSelectors = res;
      });
    },

    delUserSelector(conditions, index) {
      conditions.splice(index, 1);
    },
    userSelectionsOkHandler(value) {
      var item = this.userSelectors[value.index];
      this.$set(item, "selections", []);
      value.value.forEach((selection) => {
        item.selections.push({
          id: selection.id,
          name: selection.name,
        });
      });

      this.$store
        .dispatch("workflow/getUsersOfUserSelecton", {
          userSelectorId: item.selectorId,
          selectionIds: item.selections.map((s) => s.id).join(","),
        })
        .then((res) => {
          this.allUsers = res;
        });
    },
    selectorChange(item) {
      this.$set(item, "selections", []);
    },
    handleUserChange(values) {
      let users = (this.allUsers || []).filter(
        (u) => values.indexOf(u.id) > -1
      );
      this.$emit("ok-click", { users: users });
    },
  },
};
</script>

<style>
/* .user-card .el-card__body{
  padding: 10px;
} */
</style>
